<template>
    <div class="deviceDetailsPage">
        <router-view></router-view>
        <div class="top">
            <el-card class="leftCard">
                <SensorDataCard></SensorDataCard>
            </el-card>
            <div class="occupy"></div>
            <el-card class="rightCard">
                <div class="rightCardItem">
                <SensorDataCard></SensorDataCard>
                <SensorDataCard></SensorDataCard>
                <SensorDataCard></SensorDataCard>
                <SensorDataCard></SensorDataCard>
                <SensorDataCard></SensorDataCard>
                </div>
            </el-card>
        </div>
        <!-- 间隔20px -->
        <div style="height:20px"></div>

        <div class="middle">
            <RingchartsCard :headerText="'最新传感器状态统计'" :ringCharts="eqDetailCurrentStatus">
            </RingchartsCard>
            <SensorWarnHistoryCard>
            </SensorWarnHistoryCard>
        </div>

        <!-- 间隔20px -->
        <div style="height:20px"></div>
        <!-- 绘制表格 -->
        <el-card class="box-card" style="marginTop;:20px">
            <el-table :data="sensorTableData" style="width: 100%">
                <el-table-column prop="sensorOrder" label="序号" width="180" />
                <el-table-column prop="eqName" label="传感器" width="180" />
                <el-table-column prop="sensorID" label="传感器ID" />
                <el-table-column prop="sensorStatus" label="状态" />
                <el-table-column prop="parameter1" label="参数1" />
                <el-table-column prop="parameter2" label="参数2" />
                <el-table-column prop="parameter3" label="参数3" />
                <el-table-column prop="temperature" label="温度" />
                <el-table-column prop="voltage" label="电压" />
                <el-table-column prop="operation" label="操作" fixed="right">
                    <template #default>
                        <el-button link type="primary" size="small" @click="checkSensorDetails">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
    name: 'DeviceDetails'
})
</script> 
<script setup lang="ts">
import { ref } from 'vue'
import RingchartsCard from '@/components/RingchartsCard/index.vue'
import SensorWarnHistoryCard from './components/SensorWarnHistoryCard/index.vue'
import SensorDataCard from './components/SensorDataCard/index.vue'
import { useRouter } from 'vue-router'
const router = useRouter()

//当前设备最新传感器状态统计
const eqDetailCurrentStatus = ref({
    normal: 0,
    CRankWarning: 0,
    DRankWarning: 0,
    offLine: 4
})
//定义传感器表格数据
const sensorTableData = [{
    sensorOrder: '待定义',
    eqName: '待定义',
    sensorID: '待定义',
    sensorStatus: '待定义',
    parameter1: '待定义',
    parameter2: '待定义',
    parameter3: '待定义',
    temperature: '待定义',
    voltage: '待定义',
    operation: '待定义',
}]

//定义查看传感器详情的回调
function checkSensorDetails() {
    router.push({ path: '/home/deviceDetails/sensorDetails' })
}
</script>
<style lang="less" scoped>
.deviceDetailsPage {
    width: 100%;

    .top {
        display: flex;
        justify-content: space-between;
        width: 100%;
        .leftCard {
            width: 16%;
        }
        .occupy {
            width: 4%;
        }
        .rightCard {
            width: 80%;
            .rightCardItem{
                display: flex;
                justify-content: space-between;
            }
        }
    }

    .middle {
        display: flex;
        justify-content: space-between;
    }
}</style>